<template>
  <view class="container">
    <input class="search" type="text" placeholder="请输入关键字搜索">
    <nav-list :navList="navList" @select="select" :selectValue="selectValue" />
    <view class="list">
      <view v-for="(item, i) in imgList" :key="item.id" class="cell" @tap="toDetail(item)">
        <image :src="item.img" mode="aspectFit" />
        <view class="cell-right">
          <view class="title"> {{ item.title }}</view>
          <view class="time"> {{ item.updateTimeInSecond }}</view>
        </view>
      </view>
    </view>
  </view>
</template>
  
<script>
import NavList from '../components/navList.vue'
import { navList } from './data'
import { imgList } from '../index/indexData'
export default {
  components: {
    NavList
  },
  data() {
    return {
      navList,
      selectValue: '1',
      imgList
    };
  },
  methods: {
    select(e) {
      this.selectValue = e;
    },
    toDetail(e) {
      uni.navigateTo({
        url: `/pages/news/details?id=${e.id}`
      });
    }
  }
};
</script>
  
<style lang="less" scoped>
.container {
  background-color: white;

  .search {
    width: calc(100% - 50upx);
    height: 80upx;
    border: 1px solid #ede9e9;
    border-radius: 15upx;
    margin-bottom: 30upx;
    padding: 0 25upx;
  }
}

.list {
  padding: 20upx 30upx;

  .cell {
    width: 100%;
    height: 160upx;
    margin-bottom: 30upx;
    display: flex;
    justify-content: space-between;
    border-radius: 5upx;
    text-align: start;

    image {
      width: 230upx;
      height: 160upx;
    }

    .cell-right {
      width: 450upx;
      padding: 20upx 0;

      .title {
        font-size: 26upx;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .time {
        font-size: 24upx;
        color: #888888;
      }
    }
  }
}
</style>